<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>HTML5的本地拖拽API</title>
		<style type="text/css">
			#box,.box {
				width: 100px;
				height: 100px;
				padding: 10px;
				border: 1px solid #CCC;
			}
		</style>
	</head>

	<body>
		<p>请将下面的橙色方块图片拖放到框中</p>
		<!-- ondrop事件。在可拖动元素放置在 <div> 元素中时执行 JavaScript: -->
		<!-- ondragover 事件。在元素正在拖动到放置目标时触发 -->
		<div id="box" class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<div id="box2" class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<img id="drag1" src="img/FFFFFF.jpg" draggable="true" ondragstart="drag(event)" />

		<script>
			function allowDrop(ev) {
				ev.preventDefault();
			}

			function drag(ev) {
				ev.dataTransfer.setData("Text", ev.target.id);
			}

			function drop(ev) {
				var data = ev.dataTransfer.getData("Text");
				ev.target.appendChild(document.getElementById(data));
				alert('拖放成功');
				ev.preventDefault();
			}
		</script>
	</body>

</html>